<!--
 * @Author: cl
 * @Description: 
 * @Date: 2023-05-09 11:20:05
 * @LastEditTime: 2023-05-10 17:22:16
 * @FilePath: \jsnode\css\guiji.html
 * @LastEditors: cl
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div class="div1">
      <div class="car"></div>
    </div>
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
    <script>
    //   gsap.to(".car", { x: 100 }).to({ x: 50, y: 50 });
      var tl = gsap.timeline();
      tl.add(
        gsap.to(".car", {
          duration: 1,
          delay: 1,
          x: 180,
        })
      );
      tl.to(".car", {
        duration: 1,
        y: 100,
      });
      tl.to(".car", {
        duration: 1,
        y: 100,
        x:50
      });
      tl.to(".car", {
        duration: 1,
        y: 180,
      });
      tl.to(".car", {
        duration: 1,
        x:180
      });
    </script>
    <style>
      .div1 {
        width: 250px;
        height: 250px;
        border: 1px solid pink;
        transform: skew(-20deg,0deg); 
        -ms-transform: skew(20deg,0deg);  
         -webkit-transform: skew(-20deg,0deg); /* Safari and Chrome */
        background-image: url("../img/bizhi3.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .car {
        width: 30px;
        height: 30px;
        background-image: url("../img/7ed145d4d9121003035bfa1f942e1ed.png");
        background-size: 100% 100%;
      }
    </style>
  </body>
</html>
